<style> .uploadify-queue { display:none; } </style>
<div><span class="btn btn-primary" id="upload-image">上传图片</span></div>
<div class="photo-list clearfix margin-bottom" id="photo-list">
	<ul></ul>
</div>
<form action="" class="form-horizontal" role="form">
	<div class="form-group">
		<div class="col-sm-8">
			<input type="hidden" name="images" id="images" value=""/>
			<input type="hidden" name="grp_id" value="{$_GET['grp_id']}"/>
			<button type="submit" class="btn btn-primary submit" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/addImagePost">保存更改</button>
		</div>
	</div>
</form>
<!-- uploadify -->
<link rel="stylesheet" href="__PUBLIC__/Style/Common/uploadify/uploadify.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/uploadify/jquery.uploadify.min.js?{:rand(0,9999)}"></script>
<script type="text/javascript">

$(function() {
	
	var imageInfo = [],
		imagesHidden = document.getElementById("images");//记录上传的照片数据并赋值到隐藏域。
	
	$("#upload-image").uploadify({
        'multi'			      :	true,
        'buttonClass'	    :	'margin-bottom',
        'fileSizeLimit'   : 	'200kb',
        'buttonText'	    :	'上传图片',
        'fileTypeDesc' 	  : 	'Image Files',
        'fileTypeExts' 	  : 	'*.jpg; *.png',
        'swf'			        : 	'__PUBLIC__/Style/Common/uploadify/uploadify.swf',
        'uploader'		    : 	'__MODULE__/Upload/uploadOne',
        'onUploadSuccess'	: function(data, res){
        	var url = eval("(" + res + ")").extra.url;
        	imageInfo.push( {"url": url} );
        	addImageLists( imageInfo );
        	imagesHidden.value = JSON.stringify( imageInfo );
        }
    });
	
	//初始化
	var images = {$photoImagesJSON};
	addImageLists(images);
	
	function addImageLists( images ) 
	{
		if(!images){return;}
		var html = "",
			spacing = 15,	//每个图片间隔距离
			photoList = document.getElementById( "photo-list" ),
			photoListUl = photoList.children[0],
			clientWidth = document.documentElement.clientWidth,
			itemWidth = (clientWidth-spacing*6) / 7; //计算出每个图片宽
		
		for(var i=0; image = images[i]; i++) {
			
			html += "<li class='photo-item' data-id='" + image.id + "'>"
				   +"<div class='photo'>"
				   +"<a href='javascript:void(0)'><img src='" + image.url + "' /></a>"
				   +"</div>"
				   +"<span class='remove'>×</span>"
				   +"</li>";
				   
		}
		photoListUl.insertAdjacentHTML( "afterbegin", html );
	}
	
	$("#photo-list ul").delegate(".remove", "click", function(){
		removeImage( $(this).parent() );
	});
	
	function removeImage( elem ) {
		var id = $( elem ).attr( "data-id" );
		$.post("__CONTROLLER__/restoreImagePost", {"id": id}, function( data ){
			$( elem ).fadeOut(400, function(){
				$( elem ).remove();
				$().alertMsg({"type": "success", "msg": data.msg})
			})
		})
	}
});
</script>